import React, { Component } from "react";
import MySwiper from "../../components/MySwiper";
import MyNav from "../../components/MyNav";
import MyList from "../../components/MyList";
import { index_banner } from "../../api/index";

import "../../styles/Home.css"

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bannerlist: [],
    };
  }
  toSearch() {
    // 以下这些跳路由的方式都可以称为"编程式导航"
    // this.props.history.push('/search');//跳路由
    // this.props.history.go(-1);//返回上一个路由
    // this.props.history.goBack();//返回上一个路由
    // this.props.history.goForward();//前进一个路由
    // this.props.history.replace('/search');//替换当前路由

    // this.props.history.push('/search/'+666);//跳动态路由
    // this.props.history.push({ pathname:'/search',query:{ id:1234 } });//跳路由传参
    this.props.history.push({ pathname: "/search", state: { id: 1234 } }); //跳路由传参
  }
  async componentDidMount() {
    var res = await index_banner();
    if (res.data.code == 200) {
      this.setState({ bannerlist: res.data.list });
    }
  }
  render() {
    //当一个组件是通过匹配路由规则 渲染出来的, 这样的组件props中默认会自动添加三个路由相关的对象:
    //history,location,match
    //当一个组件不是通过匹配路由规则 渲染出来的, 这样的组件props中默认是{}

    //history 主要负责跳路由
    //location 主要负责获取路由相关参数
    //match 主要负责获取路由相关参数

    return (
      <div className="home">
        {/* Home组件 */}
        <div className="input-box">
          <input type="text" placeholder="搜索商品" onClick={() => {this.toSearch()}}/>
          <span>客服</span>
        </div>
        {/* <button
          onClick={() => {
            this.toSearch();
          }}
        >
          跳转到搜索页
        </button> */}
        {/* 轮播图 */}
        <div className="center-box">
          <MySwiper swiperlist={this.state.bannerlist} />
          <MyNav></MyNav>
          <MyList></MyList>
        </div>
      </div>
    );
  }
}

export default Home;
